<!--
 @description 指定区域下的所有立面列表
 @fileName List.vue
 @author zengqiongying
 @created 2023/06/15 08:55:49
-->
<template>
  <div class="has-foot-pb bg-weaker">
    <div class="pd-lr-main">
      <div v-if="detail.module1" class="module-name">{{ detail.module1 }} / {{ detail.module2 }}</div>
      <FacadeItems :list="list" :acceptMold="acceptMold" readonly @detail="onFacadeDetail" />
      <qmp-empty v-if="detail.module1 && list.length === 0" description="暂无立面数据" image-size="60px" />
    </div>
    <div v-if="list.length > 0" :class="['ctm-content-foot']">
      <div class="btn radius-larg ctm-btn-warning" @click="onFacadeAll">区域预览</div>
    </div>
  </div>
</template>

<script lang="ts">
  import { toRefs, getCurrentInstance } from 'vue'
  import { useRouter, useRoute } from 'vue-router'
  import { useStore } from 'vuex'
  import FacadeItems from '@/views/components/Facade/Items.vue'
  import { ListCommon } from '@/mixins/Facade'
  import { queryTaskDetail } from '@/apis/Task'

  export default {
    name: 'FacadeList',
    components: { FacadeItems },
    filters: {},
    setup() {
      const instance = getCurrentInstance()
      const $store = useStore()
      const $router = useRouter()
      const $route = useRoute()
      const { datas, getDetailData, onFacadeDetail, onFacadeAll } = ListCommon($router, $store, instance)
      datas.caid = $route.query.caid || ''
      datas.amid = $route.query.id || ''
      datas.acceptMold = $route.query.acceptMold || ''
      datas.taskDetail = {}

      const getTaskDetail = () => {
        // 查询验收任务详情，用于判断当前验收任务状态
        const caid = datas.caid
        queryTaskDetail(caid).then((res: any) => {
          datas.taskDetail = res.data || {}
        })
      }

      // getTaskDetail()

      getDetailData()

      return {
        ...toRefs(datas),
        onFacadeDetail,
        onFacadeAll
      }
    }
  }
</script>
<style lang="less" scoped>
  .module-name {
    padding: 16px 0;
    font: var(--font-page-title);
    color: var(--texticon-default-strong);
  }
</style>
